<template>


  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :lock-scroll="tableConfig.lockScroll"
    :append-to-body="tableConfig.appendToBody"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.close"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-tabs v-model="elTab.activeName" type="card" @tab-click="handleTabClick" style="min-height: 600px; max-height: 600px; ">
      <el-tab-pane label="应用" name="appDepend">

        <!--  查询-->
        <el-form inline label-width="90px" size="mini" class="demo-form-inline">

          <!--公共部分-->
          <el-form-item label="名称">
            <el-input placeholder="请输入名称" v-model.trim="queryParam.name" clearable size="mini"></el-input>
          </el-form-item>

          <!--应用-->
          <el-form-item label="公共应用">
            <el-select v-model="queryParam.appCommon" placeholder="请选择" clearable  >
              <el-option key="1" label="公共项目" :value="1"/>
              <el-option key="0" label="非公共项目" :value="0"/>
            </el-select>
          </el-form-item>

          <el-form-item label="应用状态">
            <el-select v-model="queryParam.appState" placeholder="请选择" clearable  >
              <el-option key="1" label="立项" :value="1"/>
              <el-option key="2" label="开发" :value="2"/>
              <el-option key="4" label="维护" :value="4"/>
              <el-option key="99" label="废弃" :value="99"/>
            </el-select>
          </el-form-item>

          <el-form-item label="项目类型">
            <el-select v-model="queryParam.appType" placeholder="请选择" clearable  >
              <el-option key="1" label="app" :value="1"/>
              <el-option key="2" label="前端" :value="2"/>
              <el-option key="3" label="后端" :value="4"/>
              <el-option key="4" label="小程序" :value="99"/>
            </el-select>
          </el-form-item>

          <el-form-item label="重要等级">
            <el-select v-model="queryParam.appImportance" placeholder="请选择" clearable  >
              <el-option key="1" label="辅助应用" :value="1"/>
              <el-option key="2" label="普通应用" :value="2"/>
              <el-option key="3" label="重点应用" :value="3"/>
              <el-option key="4" label="核心应用" :value="4"/>
            </el-select>
          </el-form-item>

          <el-form-item label="负责人姓名">
            <el-input placeholder="请输入负责人姓名" v-model.trim="queryParam.appDirectorName" clearable size="mini"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="success" size="mini" @click="getAvailableDepend">查询</el-button>
            <el-button type="info" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>

        </el-form>



        <el-table ref="multipleTableApp" :data="tableData"
          tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChangeApp">

          <el-table-column type="selection" width="55" />

          <el-table-column label="名称" >
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>

          <el-table-column label="状态" width="120">
            <template slot-scope="scope">
              <el-tag size="mini" type="warning" v-if="scope.row.appState === 1">立项</el-tag>
              <el-tag size="mini" v-else-if="scope.row.appState === 2">开发</el-tag>
              <el-tag size="mini" type="success" v-else-if="scope.row.appState === 4">维护</el-tag>
              <el-tag size="mini" type="info" v-else-if="scope.row.appState === 99">废弃</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="类型" width="120">
            <template slot-scope="scope">
              <el-tag size="mini" v-if="scope.row.appType === 1">app</el-tag>
              <el-tag size="mini" type="warning" v-else-if="scope.row.appType === 2">前端</el-tag>
              <el-tag size="mini" type="success" v-else-if="scope.row.appType === 3">后端</el-tag>
              <el-tag size="mini" type="danger" v-else-if="scope.row.appType === 4">小程序</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="开发语言" >
            <template slot-scope="scope">{{ scope.row.appLanguage }}</template>
          </el-table-column>

          <el-table-column label="重要性" width="120">
            <template slot-scope="scope">
              <el-tag size="mini" type="info" v-if="scope.row.appImportance === 1">辅助应用</el-tag>
              <el-tag size="mini" type="success" v-else-if="scope.row.appImportance === 2">普通应用</el-tag>
              <el-tag size="mini" type="warning" v-else-if="scope.row.appImportance === 3">重点应用</el-tag>
              <el-tag size="mini" type="danger" v-else-if="scope.row.appImportance === 4">核心应用</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="负责人" >
            <template slot-scope="scope">{{ scope.row.appDirectorName }}</template>
          </el-table-column>

        </el-table>
      </el-tab-pane>



      <el-tab-pane label="组件" name="componentDepend">

        <!--  查询-->
        <el-form inline label-width="90px" size="mini" class="demo-form-inline">

          <!--公共部分-->
          <el-form-item label="名称">
            <el-input placeholder="请输入名称" v-model.trim="queryParam.name" clearable size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" size="mini" @click="getAvailableDepend">查询</el-button>
            <el-button type="info" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>

        </el-form>



        <el-table ref="multipleTableComponent" :data="tableData"
                  tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChangeComponent">

          <el-table-column type="selection" width="55" />

          <el-table-column label="名称" >
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>

          <el-table-column label="官网"  show-overflow-tooltip>
            <template slot-scope="scope">
              <el-link type="primary" target="_blank" :href="scope.row.officialWebUrl" >{{ scope.row.officialWebUrl }}</el-link>
            </template>
          </el-table-column>

          <el-table-column prop="briefIntroduction" label="简介" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.briefIntroduction }}</template>
          </el-table-column>

        </el-table>

      </el-tab-pane>



      <el-tab-pane label="依赖产品" name="productDepend">

        <!--  查询-->
        <el-form inline label-width="90px" size="mini" class="demo-form-inline">

          <!--公共部分-->
          <el-form-item label="名称">
            <el-input placeholder="请输入名称" v-model.trim="queryParam.name" clearable size="mini"></el-input>
          </el-form-item>
          <!--产品-->
          <el-form-item label="产品状态">
            <el-select v-model="queryParam.productStatus" placeholder="请选择" clearable  >
              <el-option key="1" label="立项" :value="1"/>
              <el-option key="2" label="研发" :value="2"/>
              <el-option key="3" label="部署" :value="3"/>
              <el-option key="4" label="维护" :value="4"/>
              <el-option key="99" label="废弃" :value="99"/>
            </el-select>
          </el-form-item>

          <el-form-item label="产品状态">
            <el-select v-model="queryParam.productImportance" placeholder="请选择" clearable  >
              <el-option key="1" label="辅助产品" :value="1"/>
              <el-option key="2" label="普通产品" :value="2"/>
              <el-option key="3" label="重点产品" :value="3"/>
              <el-option key="4" label="核心产品" :value="4"/>
            </el-select>
          </el-form-item>

          <el-form-item label="负责人姓名">
            <el-input placeholder="请输入负责人姓名" v-model.trim="queryParam.productDirectorName" clearable size="mini"></el-input>
          </el-form-item>

          <el-form-item label="产品状态">
            <el-select v-model="queryParam.productCommon" placeholder="请选择" clearable  >
              <el-option key="1" label="公共项目" :value="1"/>
              <el-option key="0" label="非公共项目" :value="0"/>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="success" size="mini" @click="getAvailableDepend">查询</el-button>
            <el-button type="info" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>

        </el-form>


        <el-table ref="multipleTableProduct" :data="tableData"
                  tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChangeProduct">

          <el-table-column type="selection" width="55" />

          <el-table-column label="名称" >
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>

          <el-table-column label="状态" width="120">
            <template slot-scope="scope">
              <el-tag size="mini" type="warning" v-if="scope.row.productStatus === 1">立项</el-tag>
              <el-tag size="mini" v-else-if="scope.row.productStatus === 2">研发</el-tag>
              <el-tag size="mini" type="danger" v-else-if="scope.row.productStatus === 3">部署</el-tag>
              <el-tag size="mini" type="success" v-else-if="scope.row.productStatus === 4">维护</el-tag>
              <el-tag size="mini" type="info" v-else-if="scope.row.productStatus === 99">废弃</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="重要性" width="120">
            <template slot-scope="scope">
              <el-tag size="mini" type="info" v-if="scope.row.productImportance === 1">辅助产品</el-tag>
              <el-tag size="mini" type="success" v-else-if="scope.row.productImportance === 2">普通产品</el-tag>
              <el-tag size="mini" type="warning" v-else-if="scope.row.productImportance === 3">重点产品</el-tag>
              <el-tag size="mini" type="danger" v-else-if="scope.row.productImportance === 4">核心产品</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="负责人" >
            <template slot-scope="scope">{{ scope.row.productDirectorName }}</template>
          </el-table-column>

        </el-table>


      </el-tab-pane>



    </el-tabs>

    <!--分页部分-->
    <el-pagination
      style="width:33%; margin-right:10px; margin-top:10px;"
      background
      layout="total, prev, pager, next, jumper"
      @current-change="pageCurrentChange"
      :page-size="pageConfig.size"
      :current-page="pageConfig.current"
      :pager-count="5"
      :total="pageConfig.total">
    </el-pagination>


    <span slot="footer" class="dialog-footer">
      <el-button plain type="warning" @click="toSaveUpd"
                 v-if="defaultValue.saveUpdSelect !== 'select'">{{ defaultValue.title }}
                 </el-button>
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>


</template>

<script>

import http from '@/utils/http'
import {clearInvalid} from "@/utils/utils"

export default {
  name: "OpsProductDependSaveUpd",
  data() {
    return {
      // 表格的默认值
      tableConfig: {
        // 关闭时销毁 Dialog 中的元素,有时候设置为true会导致整个页面卡死
        destroyOnClose: false,
        // 弹出框是否打开
        show: false,
        // 是否显示关闭按钮
        close: true,
        // 下面2个属性解决打开弹出框后没有在最上面显示的问题，导致看到的内容是一半的，需要先将滚动条移到最上面
        lockScroll: false,
        appendToBody: true,
      },
      // 默认值，进入页面后的值
      defaultValue: {
        // 弹出框标题
        title: '查看',
        // 保存还是修改or查看,取值有 select | save | upd
        saveUpdSelect: 'select'
      },
      // 标签页信息
      elTab:{
        // 被选中的标签
        activeName: 'appDepend',
      },
      // 产品信息
      product:{},
      // 查询参数-依赖查询
      queryParam:{
        productId: null,
        necessary: null,
        type: 2,
        name: null,
        appCommon: null,
        appState: null,
        appType: null,
        appImportance: null,
        appDirectorName: null,
        productStatus: null,
        productImportance: null,
        productDirectorName: null,
        productCommon: null,
      },
      // 提交的数据
      submitData:{
        productId: null,
        dependList: [],
      },
      // 校验规则
      checkRule: {
        id: [{required: true, message: '请输入主键', trigger: 'blur'}],
      },
      // 分页参数
      pageConfig: {
        // 每页记录数
        size: 10,
        // 当前页码
        current: 1,
        // 总记录数
        total: 0,
      },
      // 表格数据
      tableData: [],
      // 被选中要绑定的-应用
      multipleSelectionApp: [],
      // 被选中要绑定的-组件
      multipleSelectionComponent: [],
      // 被选中要绑定的-产品
      multipleSelectionProduct: []
    }
  },
  methods: {
    /**
     * 当选择项发生变化时会触发该事件-应用
     * @param val
     */
    handleSelectionChangeApp(val) {
      this.multipleSelectionApp = val;
    },
    /**
     * 当选择项发生变化时会触发该事件-组件
     * @param val
     */
    handleSelectionChangeComponent(val){
      this.multipleSelectionComponent = val;
    },
    /**
     * 当选择项发生变化时会触发该事件-产品
     * @param val
     */
    handleSelectionChangeProduct(val){
      this.multipleSelectionProduct = val;
    },
    /**
     * 分页被改变的时候
     * @param value 当前页
     */
    pageCurrentChange(value) {
      this.pageConfig.current = value
      this.getAvailableDepend()
    },
    /**
     * 初始化操作
     * @param operateType 操作类型,保存还是修改or查看,取值有 select \ save \ upd
     * @param product 产品信息
     */
    init(operateType, product){
      this.defaultValue.saveUpdSelect = operateType
      this.product = product
      this.clearOldData()
      this.resetQuery()
      // 初始化查询
      this.handleTabClick()


      if (operateType === 'save'){
        this.defaultValue.title = '新增'

      } else if (operateType === 'upd'){
        this.defaultValue.title = '修改'
        // 要json处理下，否则会影响之前的值
        // this.submitData = JSON.parse(JSON.stringify(obj))

      } else {
        // 可能查看
      }

      this.tableConfig.show = true
    },
    /**
     * 清理掉旧数据
     */
    clearOldData(){
      this.submitData = {
        productId: null,
        dependList: [],
      }
    },
    /**
     * 是保存还是修改
     */
    toSaveUpd(){
      if (this.defaultValue.saveUpdSelect === 'save'){
        this.saveOpsProductDepend()

      } else if (this.defaultValue.saveUpdSelect === 'upd'){
        this.updOpsProductDepend()

      } else {

      }
    },
    /**
     * 重置查询
     */
    resetQuery(){
      this.queryParam = {
        productId: null,
        necessary: null,
        type: 2,
        name: null,
        appCommon: null,
        appState: null,
        appType: null,
        appImportance: null,
        appDirectorName: null,
        productStatus: null,
        productImportance: null,
        productDirectorName: null,
        productCommon: null,
      }
    },
    /**
     * 标签页被点击的时候
     * @param tab
     * @param event
     */
    handleTabClick(tab, event){
      // console.log(this.elTab.activeName)
      this.pageConfig.current = 1
      this.pageConfig.size = 10
      this.tableData = []
      this.getAvailableDepend()
    },
    /**
     * 分页查询对应的依赖
     */
    getAvailableDepend(){
      if (this.elTab.activeName === 'appDepend'){
        this.queryParam.type = 2
      } else if (this.elTab.activeName === 'componentDepend'){
        this.queryParam.type = 3
      } else if (this.elTab.activeName === 'productDepend'){
        this.queryParam.type = 1
      }
      this.queryParam.productId = this.product.id
      this.queryParam.current = this.pageConfig.current
      this.queryParam.size = this.pageConfig.size

      http.post("/opsProduct/getAvailableDepend", this.queryParam).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        this.pageConfig.total = data.total;
        this.pageConfig.current = data.current;
        this.pageConfig.size = data.size;
        // 表格数据
        this.tableData = data.records

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 保存
     */
    saveOpsProductDepend(){
      // 判断当前所在的table页
      let list = []
      if (this.elTab.activeName === 'appDepend'){
        if (this.multipleSelectionApp){
          this.multipleSelectionApp.forEach(item => {
            let depend = {
              productId: this.product.id,
              necessary: 0,
              type: 2,
              bindId: item.id,
            }
            list.push(depend)
          })
        }

      } else if (this.elTab.activeName === 'componentDepend'){
        if (this.multipleSelectionComponent){
          this.multipleSelectionComponent.forEach(item => {
            let depend = {
              productId: this.product.id,
              necessary: 0,
              type: 3,
              bindId: item.id,
            }
            list.push(depend)
          })
        }

      } else if (this.elTab.activeName === 'productDepend'){
        if (this.multipleSelectionProduct){
          this.multipleSelectionProduct.forEach(item => {
            let depend = {
              productId: this.product.id,
              necessary: 0,
              type: 1,
              bindId: item.id,
            }
            list.push(depend)
          })
        }
      }

      this.submitData = {
        productId: this.product.id,
        dependList: list,
      }

      console.log(this.submitData)

      http.post("/opsProductDepend/saveOpsProductDepend", this.submitData).then(response => {
        let res = response.data;

        this.$message.success ("保存成功");
        this.$emit('getListPage', null)
        // 关闭弹出框,继续添加
        this.tableConfig.show = false

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 更新
     */
    updOpsProductDepend(){
      clearInvalid(this.submitData)
      http.post("/opsProductDepend/updOpsProductDepend", this.submitData).then(response => {
        let res = response.data;
        if (!res.success) {
          // 401是token过期跳转的
          if (res.code !== 401){
            this.$message.error (res.msg);
          }
          return
        }

        this.$message.success ("更新成功");
        this.$emit('getListPage', null)
        // 关闭弹出框
        this.tableConfig.show = false

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
  }
}
</script>

<style scoped>

</style>


